<template>
  <div class="page-box">
    <!-- 搜索区 -->
    <el-collapse-transition>
      <div v-show="showSearchBox" class="search-box">
        <el-form ref="form" :inline="true" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input v-model.trim="queryParams.title" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="分类">
            <!-- 分类下拉框 v-model的值为当前被选中的el-option的 value 属性值 -->
            <el-select v-model="queryParams.cateid" clearable placeholder="请选择分类">
              <el-option
                v-for="item in $store.getters.allCate"
                :key="item.id"
                :label="item.catename"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- 日期选择器 -->
            <el-date-picker
              v-model="dateRange"
              style="width: 300px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <!-- 工具条 -->
    <div class="toolbar-box">
      <el-row type="flex" justify="space-between">
        <div>
          <el-button plain type="primary" icon="el-icon-plus" @click="$router.push('/content_article/add')">新增</el-button>
          <el-button plain type="warning" icon="el-icon-download">导出</el-button>
        </div>
        <div>
          <el-tooltip content="关闭搜索区" placement="top">
            <el-button icon="el-icon-arrow-up" circle @click="showSearchBox = !showSearchBox" />
          </el-tooltip>
          <el-tooltip content="刷新" placement="top">
            <el-button icon="el-icon-refresh" circle />
          </el-tooltip>
          <el-tooltip content="筛选" placement="top">
            <el-button icon="el-icon-menu" circle />
          </el-tooltip>
        </div>
      </el-row>
    </div>
    <!-- 表格区 -->
    <div class="table-box">
      <el-table
        :data="list"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="80"
        />
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="catename"
          label="分类名"
          width="120"
        />
        <el-table-column prop="pic" label="图片" width="120">
          <template slot-scope="scope">
            <el-image :src="scope.row.pic?'http://124.223.14.236:8060/'+scope.row.pic:''" style="height: 100px">
              <div slot="error" class="image-slot-error">
                <i class="el-icon-picture-outline" />
              </div>
              <div slot="placeholder" class="image-slot-loading">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="create_date" label="创建时间" width="120">
          <template slot-scope="scope">
            <i class="el-icon-time" style="marginRight:5px" />
            <span>{{ dateFormat(scope.row.create_date) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="ishot" label="是否推荐" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.ishot"
              disable-transitions
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column prop="istop" label="是否置顶" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.istop"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="文章状态" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status===1">已发布</el-tag>
            <el-tag v-else type="warning">待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="primary" circle icon="el-icon-edit" @click="$router.push('/content_article/edit/'+ row.id)" />
            <el-button type="danger" circle icon="el-icon-delete" @click="doDel(row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <el-row type="flex" justify="end">
      <div class="pagination-box">
        <el-pagination
          background
          :current-page="queryParams.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryParams.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-row>
  </div>
</template>
<script>
import { delArticle, getArticleList } from '@/api/content/article'
import miment from 'miment'
export default {
  data() {
    return {
      list: [],
      queryParams: {
        start_time: '',
        end_time: '',
        title: '',
        cateid: '',
        page: 1,
        limit: 10
      },
      total: 0, // 文章总数
      dateRange: [], // 查询时间范围value数组
      showSearchBox: true // 控制是否显示搜索区
    }
  },
  watch: {
    // 将查询时间数组转成时间戳赋值给查询参数
    dateRange(newValue) {
      this.queryParams.start_time = +new Date(newValue[0])
      this.queryParams.end_time = +new Date(newValue[1])
    }
  },
  async created() {
    this.initData()
    // 渲染分类下拉框
    if (!this.$store.getters.allCate.id) {
      await this.$store.dispatch('cate/getAllCate')
      this.cateList = this.$store.getters.allCate
    }
  },
  methods: {
    // 初始化数据
    async initData() {
      const res = await getArticleList(this.queryParams)
      this.list = res.data
      this.total = res.count
    },
    // 处理时间格式
    dateFormat(time) {
      return miment(time).format('YYYY-MM-DD')
    },
    // 切换每页显示数量
    handleSizeChange(value) {
      this.queryParams.limit = value
      this.queryParams.page = 1
      this.initData()
    },
    // 切换当前分页
    handleCurrentChange(value) {
      this.queryParams.page = value
      this.initData()
    },
    // 搜索
    search() {
      this.queryParams.page = 1
      this.initData()
    },
    // 重置搜索
    reset() {
      this.queryParams = {
        start_time: '',
        end_time: '',
        title: '',
        cateid: '',
        page: 1,
        limit: 10
      }
      this.dateRange = []
      this.initData()
    },
    doDel(id) {
      this.$confirm('确认删除该文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delArticle(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 处理删除当前页最后一条数据
        if (this.list.length === 1 && this.queryParams.page > 1) {
          this.queryParams.page--
        }
        this.initData()
      }).catch(() => {
        return false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-switch__core {
  -webkit-transition: none;
  transition: none!important;
  &::after{
    -webkit-transition: none;
    transition: none!important;
  }
}
.el-image{
  width: 100px;
  height: 100px;
}
.image-slot-error{
      font-size: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
     color: #909399;
     background-color: #f5f7fa;
}
.el-switch,el-switch__core{
  pointer-events: none;
}
</style>
